<template>
  <div>
    <el-card id="login">
      <h1>欢迎登录</h1>
      <!-- 登录表单 -->
      <el-form :model="loginForm" status-icon ref="ruleForm" class="Form">
        <!-- 账号 -->
        <el-form-item prop="userName">
          <el-input v-model="loginForm.userName" placeholder="账号">
            <i slot="suffix" class="iconfont icon-zhanghu"></i>
          </el-input>
        </el-form-item>
        <!-- 密码框 -->
        <el-form-item prop="password">
          <el-input :type="loginForm.passType" v-model="loginForm.password" autocomplete="off" placeholder="密码">
            <i slot="suffix" class="iconfont" :class="loginForm.passIcon" @click="isView()"></i>
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="verificationCode" id="verificationCode">
          <el-col :span="11">
            <el-input v-model="loginForm.verificationCode" placeholder="验证码" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="11" id="image">
            <img :src=loginForm.src alt="加载失败">
          </el-col>
        </el-form-item>
        <!-- 记住密码 与 忘记密码 -->
        <el-form-item>
          <el-checkbox checked style="float: left;">记住密码</el-checkbox>
          <router-link to="/resetPassword" style="float: right;">忘记密码</router-link>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>  
  </div>
  
</template>

<script>
  export default {
    name: 'Login',
    components: {},
    data() {
      return {
        loginForm: {
          userName: '',
          password: '',
          passType: 'password',
          passIcon: 'icon-icon-test1',
          verificationCode: '',
          src: require('@/assets/code.jpeg')
        },
        iconView: false
      }
    },
    methods: {
      isView() {
        if(this.iconView) {
          // 当前为查看密码状态，需要切换为不查看图标
          this.loginForm.passIcon = 'icon-icon-test1'
          this.loginForm.passType = 'password'
        } else {
          // 密码不显示状态
          this.loginForm.passIcon = 'icon-icon-test'
          this.loginForm.passType = 'text'
        }
        // 状态反转
        this.iconView = !this.iconView
        console.log(this.iconView)
      }
    }
  }
</script>

<style lang="less" scoped>
div {
  position: relative;
  overflow: hidden;
  height: 100%;
}
#login {
  float: right;
  width: 30%;
}
.el-form {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -35%;
  margin-left: -35%;
  width: 70%;
}

#image {
  margin-left: 8%;
  height: 40px;
  img {
    height: 100%;
    width: 100%;
  } 
}
.el-button {
  width: 100%;
}

.icon-zhanghu,
.icon-icon-test,
.icon-icon-test1  {
  font-size: 25px;
  margin: 10px 10px 0px 5px;
}

</style>
